<template>
  <div>
    <el-button type="primary" @click="clickNew" size="mini">新增</el-button>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="632px">
      <div style="margin:20px">
        <el-form :model="ruleForm" label-position="right"
         status-icon :rules="rules" ref="ruleForm" label-width="80px" >
          <el-form-item label="组别名称:" prop="groupName">
            <el-input class="form-input2" v-model.number="ruleForm.groupName" autocomplete="off" auto-complete="new-password" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="所属组长:" prop="groupLeader">
            <el-select class="form-input2" v-model="ruleForm.groupLeader" placeholder="请选择角色..." autocomplete="off" auto-complete="new-password">
              <el-option
                v-for="item in data.leaderList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组内成员:">
            <el-transfer
              :titles="['可选人员', '已选人员']"
              @change="handleChange"
              height="500px"
              :props="{
                key: 'userId',
                label: 'userName'
              }"
              filterable
              filter-placeholder="请输人员姓名"
              v-model="ruleForm.choseMember"
              :data="data.memberList">
            </el-transfer>
          </el-form-item>
          <el-form-item style="float:right;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>        
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { add, edit} from '@/api/group';
  import { findAll } from '@/api/user'
  export default {
    name: "PopVue",
    data() {
      var checkGroupName = (rule, value, callback) => {        
        if (!value) {
          return callback(new Error('组别名称不能为不能为空'));
        }        
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateLeader = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请选择组长'));
        }
        callback();
      };
    
      return {
        dialog: false,
        disabled: true,
        ruleForm: {
          pass: '',
          checkPass: '',
          groupName: '',
          groupLeader: '',
          groupId: '',
          choseMember: []
        },
        data: {
          leaderList: [],
          memberList: []
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          groupName: [
            { validator: checkGroupName, trigger: 'blur' }
          ],
          groupLeader: [
            { validator: validateLeader, trigger: 'blur'}
          ]
        },
        options: [{
          value: 'admin',
          label: 'admin'
        }, {
          value: 'leader',
          label: 'leader'
        }, {
          value: 'developer',
          label: 'developer'
        }, {
          value: 'tester',
          label: 'tester'
        }],
      }
    },
    methods: {
      handleChange(value, direction, movedKeys) {
          // console.log(this.ruleForm.choseMember);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.disabled
            ?edit(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
              }).catch(error => {
                console.log(error)
              })
            :add(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName]!=null) {
          this.$refs[formName].resetFields();
        }
      },
      clickNew(row) {
        this.disabled = false
        this.dialog = true
        this.resetForm('ruleForm')
        if (row.groupId!=null) {
          this.ruleForm.groupId = row.groupId
          this.ruleForm.groupName = row.groupName
          this.ruleForm.groupLeader = row.groupLeader
          if (row.membersList!==null) {
            this.ruleForm.choseMember = row.membersList
          } else {
            this.ruleForm.choseMember = []
          }
          this.disabled = true
        }
      },
      initData() {
        const dat = {}
        const that = this
        findAll(dat).then(response => {
          const list = response.data
          list.forEach(element => {
            if (element.role==='leader') {
              that.data.leaderList.push(element)
            }
          });
          that.data.memberList = list
          // console.log(that.data.memberList)
        })
      }
    },
    mounted() {
      this.initData()
    }
  }

</script>
<style>
.el-form-item__content{
  margin-left:0 !important;
}
.el-transfer-panel{
   height: 500px !important;
}
.el-transfer-panel__body {
  height: 430px !important;
}
.el-checkbox-group {
  height: 450px !important;
}
.form-input2{
      width: 502px;
}

</style>
